<template>
    <div>
        <el-card>
            <!-- <el-input style="width:440px" @clear="searchOrder" clearable v-model="searchForm.productName"
                placeholder="请输入设备名称" class="input-with-select">
                <template #append>
                    <el-button icon="Search" @click="searchOrder" />
                </template>
</el-input> -->
            <h4 v-if="userStore.state.role==='engineer'">已接取工单</h4>
            <h4 v-else>已提交工单</h4>
            <el-dialog v-model="acceptOrderVisible" title="可接取工单" width="1000">
                <el-table :data="waitAcceptOrderData" border>
                    <el-table-column prop="id" label="工单编号" width="100" />
                    <el-table-column prop="productName" label="设备名称" width="180" />
                    <el-table-column prop="clientDesc" label="问题描述" width="180" />
                    <el-table-column prop="createTime" label="创建时间" width="180" />
                    <el-table-column prop="updateTime" label="更新时间" width="180" />
                    <el-table-column label="操作" width="150">
                        <template #default="scope">
                            <el-button type="danger" size="small" @click="acceptOrder(scope.row.id)">接单</el-button>
                            <el-button size="small"
                                @click="() => router.push({ path: `/order/detail/${scope.row.id}` })">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <el-button type="success" v-show="userStore.state.user.role==='engineer'"
                @click="acceptOrderVisible = true; console.log(acceptOrderVisible)">接取用户工单</el-button>
            <el-button type="primary" style="margin-left: 10px" @click="createOrder">创建维修工单</el-button>
            <el-table :data="tableData" border style="width: 100%;margin-top:20px">
                <!-- <el-table-column label="序号" width="180">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column prop="id" label="工单编号" width="100" />
                <el-table-column prop="productName" label="设备名称" width="180" />
                <el-table-column prop="clientDesc" label="问题描述" width="180" />
                <el-table-column prop="createTime" label="创建时间" width="180" />
                <el-table-column prop="updateTime" label="更新时间" width="180" />
                <el-table-column label="当前状态" width="130">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0">已创建</el-tag>
                        <el-tag v-if="scope.row.status == 1" type="success">已接单</el-tag>
                        <el-tag v-if="scope.row.status == 8" type="info">已取消</el-tag>
                        <el-tag v-if="scope.row.status == 3" type="warning">检测中</el-tag>
                        <el-tag v-if="scope.row.status == 4" type="warning">复检中</el-tag>
                        <el-tag v-if="scope.row.status == 2" type="success">用户确认</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="250">
                    <template #default="scope">
                        <el-button size="small"
                            @click="() => router.push({ path: `/order/detail/${scope.row.id}` })">详情</el-button>
                        <el-button type="warning" size="small" v-if="checkUser"
                            @click="cancelOrder(scope.row.id)">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- <el-pagination style="margin-top:20px" :current-page="searchForm.current" :page-size="searchForm.size"
                layout="total, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :total="total.value" /> -->
        </el-card>
    </div>
</template>

<script setup>
import userApi from "../api/user";
import workOrderApi from "../api/order"
import EngineerApi from "../api/engineer"
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'
import { useUserStore } from "../store/user";
import { useOrdersStore } from "../store/order"


const userStore = useUserStore();
const orderStore = useOrdersStore();
const router = useRouter();
const acceptOrderVisible = ref(false);
console.log(userStore.state.user.role)
// Dom 挂载之后
onMounted(() => {
    getOrderList(searchForm);
    getInitialOrderList();
})
// 用户数据
let tableData = ref([]);
let waitAcceptOrderData = ref([]);
let total = ref(0);
const searchForm = reactive({
    id: userStore.state.user.id,
    flag: userStore.state.user.role,
})

// 搜索条件
const acceptOrder = async (id) => {
    const request = reactive({
        orderId: id,
        engineerId: userStore.state.user.id,
    })
    const res = await EngineerApi.acceptOrder(request);
    console.log(res.data);
    getInitialOrderList();
    getOrderList(searchForm);
}

const getInitialOrderList = async () => {
    const res = await workOrderApi.getInitialOrderList();
    waitAcceptOrderData.value = res.data.data.workOrderList;
    total.value = res.data.data.total;
    orderStore.actions.setInitialOrderList(res.data.data.workOrderList);
}
// 获取工单列表
const getOrderList = async (searchForm) => {
    const res = await workOrderApi.getOrderList(searchForm);
    tableData.value = res.data.data.workOrderList;
    total.value = res.data.data.total;
    orderStore.actions.setOrderList(res.data.data.workOrderList);
}
const handleSizeChange = (size) => {
    searchForm.size = size;
    getOrderList(searchForm);
}
const handleCurrentChange = (page) => {
    searchForm.current = page;
    getOrderList(searchForm);
}
const searchOrder = () => {
    searchForm.page = 1;
    getOrderList(searchForm);
}
const checkUser = userStore.state.user.role === "engineer" ? true : false;
const createOrder = () => {
    console.log("创建工单")
    router.push("/order/create");
}
// 删除用户
const deleteUser = (id) => {
    ElMessageBox.confirm(
        '确定要删除该用户信息吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await userApi.delUser({ id: id });
        console.log(res)
        if (res.data.success) {
            ElMessage.success("删除成功")
            getUserList();
        } else {
            ElMessage.error("删除失败")
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}
// 取消工单
const cancelOrder = (id) => {
    console.log(userStore.state.user.role)
    ElMessageBox.confirm(
        '确定要取消该工单吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await workOrderApi.cancelWorkOrder({ id: id });
        if (res.data.code == 200) {
            ElMessage.success("取消工单成功")
            getOrderList(searchForm);
        } else {
            ElMessage.error(res.data.data)
        }
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}
</script>

<style lang="scss" scoped></style>